<template>
	<!-- 生产决策 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="outerCollapse">
			<u-collapse-item name="1" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">采煤统计</text></view>
				</template>
				<uni-table ref="table" stripe emptyText="暂无更多数据" style="width: 100%;">
					<uni-tr>
						<uni-th align="center">维度</uni-th>
						<uni-th align="center">实际产量(万吨)</uni-th>
						<uni-th align="center">计划产量(万吨)</uni-th>
						<uni-th align="center">完成率(%)</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData1" :key="index">
						<uni-td align="center"><u--text :text="item.value" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="13" align="center" bold="true"
								color="#0853FF"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="13" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">剥离统计</text></view>
				</template>
				<uni-table ref="table" stripe emptyText="暂无更多数据" style="width: 100%;">
					<uni-tr>
						<uni-th align="center">维度</uni-th>
						<uni-th align="center">实际剥离(万吨)</uni-th>
						<uni-th align="center">计划产量(万吨)</uni-th>
						<uni-th align="center">完成率(%)</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData2" :key="index">
						<uni-td align="center"><u--text :text="item.value" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="13" align="center" bold="true"
								color="#0853FF"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="13" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">运输统计</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '月度'},{name: '年度'}]"
					:activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">储量统计</text></view>
				</template>
				<view class="flex p-10 s-center m-between m-b-10" style="background-color: #F5F7FE;">
					<view class=""> 煤仓总储量 </view>
					<view class="flex">
						<u--text text="190" size="16" color="#0853FF" bold="true" align="center"></u--text>
						<text class="m-l-5">万吨</text>
					</view>
				</view>
				<swiper :indicator-dots="true" class="swiper" style="height: 260px;">
					<swiper-item v-for="(chunk, chunkIndex) in chunkedLists" :key="chunkIndex">
						<u-grid :border="true" col="3">
							<u-grid-item v-for="(item, index) in chunk" :index="(chunkIndex * 3) + index" :key="index"
								:customStyle="{height:200+'rpx'}" bgColor="#F5F7FE">
								<view class="flex flex-col s-center" style="width: 100%; height: 100%;">
									<text class="grid-text m-t-10 m-b-15"
										style="font-size: 15px;color:#000;">{{ item.title }}</text>
									<text class="grid-text fw m-b-5"
										style="font-size: 18px;color:#0853FF;">{{ item.value }}</text>
									<text class="grid-text" style="font-size: 12px;">料位</text>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">能耗统计</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '耗油量'},{name: '耗电量'}]"
					:activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="6" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">功效统计</text></view>
				</template>
				<uni-table ref="table" stripe emptyText="暂无更多数据" style="width: 100%;">
					<uni-tr>
						<uni-th align="center" width="80">全员功效</uni-th>
						<uni-th align="center" width="80">采煤功效</uni-th>
						<uni-th align="center" width="80">剥离功效</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData3" :key="index">
						<uni-td align="center"><u--text :text="item.value" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="13" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5, 6])

	const tableData1 = ref([{
				value: '日',
				value1: '5.6',
				value2: '1.0',
				value3: '102.8',
			},
			{
				value: '月',
				value1: '23.5',
				value2: '30.0',
				value3: '98.3',
			},
			{
				value: '年',
				value1: '399.9',
				value2: '400.0',
				value3: '100.0',
			},
		]),
		tableData2 = ref([{
				value: '日',
				value1: '5.6',
				value2: '1.0',
				value3: '102.8',
			},
			{
				value: '月',
				value1: '23.5',
				value2: '30.0',
				value3: '98.3',
			},
			{
				value: '年',
				value1: '399.9',
				value2: '400.0',
				value3: '100.0',
			},
		]),
		tableData3 = ref([{
				value: '54.3t/人',
				value1: '66.2t/人',
				value2: '10.2万m³/人',
			},
			{
				value: '54.3t/人',
				value1: '66.2t/人',
				value2: '10.2万m³/人',
			},
		]),
		list = ref([{
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, {
			title: '煤仓名称',
			value: '80',
		}, ])

	const chunkedLists = computed(() => {
		const chunkSize = 6; // 一次显示6个
		const chunks = [];

		for (let i = 0; i < list.value.length; i += chunkSize) {
			chunks.push(list.value.slice(i, i + chunkSize));
		}

		return chunks;
	});

	const chartData1 = ref({}),
		chartData2 = ref({}),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: false,
			},
			title: {
				name: "55.3万吨",
				fontSize: 15,
				color: "#000",
				offsetY: -10
			},
			subtitle: {
				name: "本月汽运量累计",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts2 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: false,
			},
			title: {
				name: "133.2L",
				fontSize: 15,
				color: "#000",
				offsetY: -10
			},
			subtitle: {
				name: "年度车辆油耗累计",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		}

	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				series: [{
					data: [{
						name: "沫煤",
						value: 150
					}, {
						name: "原煤",
						value: 100
					}, {
						name: "三八块",
						value: 104
					}, {
						name: "二五籽",
						value: 151,
					}]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));

			let res2 = {
				series: [{
					data: [{
						name: "挖掘机",
						value: 100
					}, {
						name: "推土机",
						value: 150
					}, {
						name: "矿卡",
						value: 151
					}, {
						name: "指挥车",
						value: 104,
					}, {
						name: "其他",
						value: 104,
					}]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));

		}, 500);
	}

	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
	.u-grid-item {
		border-bottom-width: 8rpx !important;
		border-right-width: 8rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}
</style>